<template>
    <div class="row mcrt-wrap">
        <div v-if="bannerHead.length" class="row mcrt-banner">
            <img :src="bannerHead[0].image" alt="">
        </div>
        <div class="row mcrt-content">
            <router-link  v-for="(v,i) of showImages" :key="i" class="mcrt-contentWrap" tag="div" :to="v | searchBy">
                <a class="mcrt-imageWrap">
                    <img :src="v.image" alt="">
                </a>
                <p>
                    {{v.title}}
                </p>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    computed:{
        bannerHead(){
            return this.$store.getters.classifyRTopBannerHead
        },
        showImages(){
            return this.$store.getters.classifyRTopImages;
        }
    },
    filters:{
        searchBy(v){
            let fcid=v.link.match(/fcid=\d*/)[0].split("=")[1];
            let title=v.title
            return `/typeShow/${fcid}/${title}`
        }
    },
    mounted(){
        // console.log(this.$store.getters);
    }
  
}
</script>

<style lang="less">
    .mcrt-wrap{
        padding: 0.2rem 0 0;
        >.mcrt-banner{
            padding:0 0 0.2rem;
            >img{
                width:100%;
            }
        }
        >.mcrt-content{
            display: flex;
            flex-flow: row wrap;
            >.mcrt-contentWrap{
                width:33.33%;
                text-align: center;
                color:#555;
                >.mcrt-imageWrap{
                    display: inline-block;
                    font-size: 0;
                    width:60%;
                    /*width:100%;*/
                    background-color: #eee;
                    /*margin-bottom:0.15rem;*/
                    >img{
                        width:100%;
                    }
                }
            }
        }
    }

</style>
